<template>
    <div class="container" style="margin-top: 5vh;">
      <div class="row board">
          <div class="col-6 lang">
              <span class="ml-3" style="height: 5vh; font-family: Arial, Helvetica, sans-serif;" type="success">请选择语言</span>
              <el-select @change="showLang(lang)" style="height: 5vh; margin-left: 1vh;" v-model="lang">
                  <el-option
                  v-for="lang in langList"
                  :key="lang.id"
                  :value="lang.lang"
                  />
              </el-select>
          </div>
          <div class="col-6 lang">
              <span class="ml-3" style="height: 5vh; font-family: Arial, Helvetica, sans-serif;" type="success">编辑器风格</span>
              <el-select @change="showTheme(theme)" style="height: 5vh; margin-left: 1vh;" v-model="theme">
                  <el-option
                  v-for="theme in themeList"
                  :key="theme.id"
                  :value="theme.theme"
                  />
              </el-select>
          </div>
      </div>
      <AceEditor
        v-model:value="aceEditor.content"
        @update:value="aceEditor.content = $event"
        :theme="aceEditor.theme"
        :language="aceEditor.language"
    ></AceEditor>
    </div>
</template>

<script>
import AceEditor from "@/views/AceEditor.vue";
import {reactive, watch, ref} from "vue";

export default {
  name: "WarlockHome",
  components: {AceEditor},
  setup() {
    let lang = ref('c_cpp')
    let theme = ref('eclipse')
    const aceEditor = reactive({
      content: "",
      theme: theme.value,
      language: lang.value,
    });

    const langList = ref([
      {id: 1, lang: 'c_cpp'},
      {id: 2, lang: 'java'},
      {id: 3, lang: 'python'},
      {id: 4, lang: 'golang'},
      {id: 5, lang: 'batchfile'},
      {id: 6, lang: 'powershell'},
      {id: 7, lang: 'javascript'},
    ])

    const themeList = ref([
      {id: 1, theme: 'textmate'},
      {id: 2, theme: 'eclipse'},
      {id: 3, theme: 'monokai'},
      {id: 4, theme: 'chaos'},
      {id: 5, theme: 'github'},
      {id: 6, theme: 'terminal'}
    ])

    const showLang = (lang) => {
      aceEditor.language = lang
    }
    
    const showTheme = (theme) => {
      aceEditor.theme = theme
    }

    watch(() => aceEditor.language,
        (lang) => {
          aceEditor.language = lang
        },
        () => aceEditor.theme,
        (theme) => {
          aceEditor.theme = theme
        }
    )
    return {
      aceEditor,
      langList,
      lang,
      themeList,
      theme,
      showLang,
      showTheme
    }
  }
}
</script>

<style scoped>
.board {
  background: white;
  border: 1px solid white;
  border-radius: 4px 4px 0px 0px;
  width: 100%;
  margin: auto;
}

.ace {
  position: relative !important;
  border: 1px solid lightgray;
  border-radius: 0px 0px 4px 4px;
  margin: auto;
  height: auto;
  width: 100%;
}
</style>